<template>
    <div class="list-wrapper">
        <table class="list-table" border="0" cellspacing="0" cellpadding="0">
            <thead>
            <tr>
                <th>
                    <span class="icon add" @click="projectAdd"></span>
                </th>
                <th>项目编号</th>
                <th>项目名称</th>
                <th>预期投入</th>
                <th>设备</th>
                <th>研发周期</th>
                <th>截止日期</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in list">
                <td>
                    <span class="icon del" @click="DelList(item.id)"></span>
                    <span class="icon det" @click="detail(item.id)"></span>
                </td>
                <td>{{item.number}}</td>
                <td>{{item.name}}</td>
                <td>{{item.invest}}</td>
                <td>{{item.equipment}}</td>
                <td>{{item.cycle}}</td>
                <td>{{item.deadline}}</td>
            </tr>
            </tbody>
        </table>
        <div class="namtc-pagination">
            <el-pagination @current-change="handleCurrentChange" :current-page="page" :page-size="10"
                           layout="total, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <el-dialog title="添加新项目" :visible.sync="pop" size="tiny">
            <el-form :model="Form" :label-width="width" :rules="projectRules" ref="projectRulesName">
                <el-form-item label="项目编号" prop="number">
                    <el-col :span="span">
                        <el-input v-model="Form.number" size="small" placeholder="请输入项目编号"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="项目名称" prop="name">
                    <el-col :span="span">
                        <el-input v-model="Form.name" size="small" placeholder="请输入项目名称"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="设备">
                    <el-col :span="span">
                        <el-input v-model="Form.equipment" size="small" placeholder="请输入设备"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="预期投入">
                    <el-col :span="span">
                        <el-input v-model="Form.invest" size="small" placeholder="请输入预期投入"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="研发周期">
                    <el-col :span="span">
                        <el-input v-model="Form.cycle" size="small" placeholder="请输入研发周期"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="截止日期">
                    <el-col :span="span">
                        <el-date-picker type="date" size="small" placeholder="选择日期" v-model="Form.deadline"
                                        style="width: 100%;"></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="参与人员" v-for="(item,index) in Form.who" :key="item.key">
                    <el-col :span="span">
                        <el-select v-model="item.value" placeholder="请选择" size="small">
                            <el-option label="item" value="item">
                            </el-option>
                        </el-select>
                        <el-button @click="removeintention(item)" size="small"><img src="../../img/del.png"/>
                        </el-button>
                        <el-button @click="addintention" size="small"><img src="../../img/add.gif"/></el-button>
                    </el-col>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="pop = false">取 消</el-button>
                <el-button type="primary" @click="changeProject">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                page: 1,
                total: 0,
                width: '200px',
                span: 15,
                pop: false,
                Form: {
                    number: '',
                    name: '',
                    invest: '',
                    equipment: '',
                    cycle: '',
                    deadline: '',
                    who: [{
                        value: ''
                    }],
                },
                projectRules: {
                    number: [{required: true, message: "请输入项目编号", trigger: "blur"}],
                    name: [{required: true, message: "请输入项目名称", trigger: "blur"}]
                },

                list: [],
            }
        },

        created() {
            this.getListData()
        },

        methods: {
            getListData() {
                let data = {
                    page: this.page
                }
                this.apiPost('Train/projectList', data).then((res) => {
                    this.list = res.list
                    this.total = res.total
                })
            },

            handleCurrentChange(val) {
                this.page = val
            },

            projectAdd() {
                this.Form = {
                    number: '',
                    name: '',
                    invest: '',
                    equipment: '',
                    cycle: '',
                    deadline: '',
                }
                this.pop = true
                setTimeout(() => {
                    this.$refs.projectRulesName.resetFields();
                }, 0)
            },

            changeProject() {

                let data = this.Form
                this.pop = false
                this.apiPost('Train/projectAdd', data).then(res => {
                    let remind = res.error ? 'error' : 'success';
                    _g.toastMsg(remind, res.msg);
                    if (!res.error) {
                        this.getListData()
                    } else {
                        this.pop = true
                    }
                })

            },

            DelList(id) {
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let data = {
                        id: id
                    }
                    this.apiPost('Train/projectDelete', data).then(res => {
                        if (!res.error) {
                            this.$message({
                                type: 'success',
                                message: res.msg
                            });
                        } else {
                            this.$message({
                                type: 'error',
                                message: res.msg
                            });
                        }
                        this.getListData()
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                })
            },

            detail(id) {
                router.push('/training/projectDetail/' + id)
            },

            removeintention(item) {
                var index = this.addForm.who.indexOf(item)
                if (index !== -1 && this.addForm.who.length > 1) {
                    this.addForm.who.splice(index, 1)
                }
            },

            addintention() {
                this.addForm.who.push({
                    value: '',
                    key: Date.now()
                });
            }
        }
    }
</script>

<style scoped>
    .add {
        width: 25px;
        height: 25px;
        background: url(../../img/add.png) no-repeat;
        background-size: 100%;
        cursor: pointer;
    }

    .edit {
        background: url(../../img/edit.gif) no-repeat;
    }

    .del {
        background: url(../../img/del.png) no-repeat;
    }

    .det {
        background: url(../../img/detail.png) no-repeat;
        cursor: pointer;
    }
</style>